<script lang="ts" setup>
  import Bmap from './Bmap.vue'
  import LiquidFill from './LiquidFill.vue'
  import WordCloud from './WordCloud.vue'
  defineOptions({
    name: 'MapView',
  })
</script>

<template>
  <div class="map-view-container">
    <a-row :gutter="[20, 20]">
      <a-col :span="18">
        <Bmap />
      </a-col>
      <a-col :span="6">
        <div class="right-box">
          <a-card title="用户月同比增长">
            <LiquidFill />
          </a-card>
          <a-card title="搜索关键词">
            <WordCloud />
          </a-card>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<style lang="less" scoped>
  .map-view-container {
    height: 600px;
    .right-box {
      display: flex;
      flex-direction: column;
      height: 600px;
      width: 100%;
      gap: 20px;
      :deep(.ant-card) {
        height: 290px;
        .ant-card-body {
          height: calc(100% - 58px);
          padding: 0;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
</style>
